<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动条-range-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
	.panel{
		margin-bottom:20px;
		}
		.range{
			width:240px;
			height:4px;
			margin-bottom:15px;
			border:1px solid #e2e2e2;
		}
		.range .value{
			background:#0064cd;
		}
		.range .handle{
			display:block;
			top:-3px;
			width:8px;
			height:8px;
			margin-left:-5px;
			border:1px solid #e2e2e2;
			background:#fff;
			cursor:default;
			outline:0;
		}
	</style>
	<script type="text/javascript" src="../code/range.js"></script>
</head>
		<body>
		<div class="header">
            <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
		<div class="main">
			<div class="panel">
				<div class="range" id="range1"></div>
				<p><input id="input1" type="text" readonly value=""/></p>
			</div>
			<div class="code">
				<p>移动结束显示</p>
				<p>
<pre>
var input1 = document.getElementById("input1");
new range("#range1",{
	min: 0,
	max: 50,
	value:40,
	steps:1,
	onChange:function(status){
		input1.value=status.value;
	}
});
</pre>
				</p>
			</div>
			<script type="text/javascript">
				var input1 = document.getElementById("input1");
				new range("#range1",{
					min: 0,
					max: 50,
					value:40,
					steps:1,
					onChange:function(status){
						input1.value=status.value;
					}
				});
			</script>
			<div class="panel">
				<div class="range" id="range2"></div>
				<p><input id="input2" type="text" readonly/></p>
			</div>
			<div class="code">
				<p>移动过程中显示</p>
				<p>
<pre>
var input2=document.getElementById("input2");
new range("#range2",{
	min: 10,
	max: 62,
	value:40,
	onSlide:function(status){
		input2.value=status.value;
	}
});
</pre>
				</p>
			</div>
			<script type="text/javascript">
				var input2=document.getElementById("input2");
				new range("#range2",{
					min: 10,
					max: 62,
					value:40,
					onSlide:function(status){
						input2.value=status.value;
					}
				});
			</script>

			<div class="panel">
				<div class="range" id="range3"></div>
				<p><input id="input3" type="text" readonly/></p>
			</div>
			<div class="code">
				<p>移动过程中显示</p>
				<p>
<pre>
var input3=document.getElementById("input3");
new range("#range3",{
	onSlide:function(status){
		input3.value=status.value;
	}
},function(api){
	api.setValue(20)
});
</pre>
				</p>
			</div>
			<script type="text/javascript">
				var input3=document.getElementById("input3");
				new range("#range3",{
					onSlide:function(status){
						input3.value=status.value;
					}
				},function(api){
					api.setValue(20)
				});
			</script>

			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>new range("selector",options,callback(api));</p>
				</div>
				<h2>options参数</h2>
				<table>
					<thead>
						<tr>
							<th width="150">参数</th>
							<th width="80">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>valueCls</td>
							<td>value</td>
							<td>当前有效值范围显示class</td>
						</tr>
						<tr>
							<td>handleCls</td>
							<td>handle</td>
							<td>拖动滑块class</td>
						</tr>
						<tr>
							<td>min</td>
							<td>0</td>
							<td>变化范围的最小值</td>
						</tr>
						<tr>
							<td>max</td>
							<td>100</td>
							<td>变化范围的最大值</td>
						</tr>
						<tr>
							<td>value</td>
							<td>1</td>
							<td>默认显示的值</td>
						</tr>
						<tr>
							<td>steps</td>
							<td>1</td>
							<td>每次移动的步长</td>
						</tr>
						<tr>
							<td>type</td>
							<td>'outer'</td>
							<td>outer进度计算以进度条宽为准，inner进度计算需扣除条滑块宽</td>
						</tr>
						<tr>
							<td>onSlide</td>
							<td>function(){}</td>
							<td>当前值变化时触发的事件，传入对象:event为事件,value为当前值</td>
						</tr>
						<tr>
							<td>onChange</td>
							<td>function(){}</td>
							<td>当前值变化后触发的事件，传入对象:event为事件,value为当前值</td>
						</tr>
					</tbody>
				</table>
				<h2>callback(api)参数</h2>
				<table>
					<thead>
						<tr>
							<th width="200">方法</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>setValue(value)</td>
							<td>设置值</td>
						</tr>
						<tr>
							<td>resize()</td>
							<td>重置尺寸</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>